<div class="edit">
    <form id="editForm" method="post">
        <div id="win">
        <table class="infobox" width="100%" border="0" cellspacing="5px"
               cellpadding="1px">
            <tr>
                <td width="15%"><label>销售编号：</label></td>
                <td width="35%"><input name="saleNo" type="text" style="width:200px;" value="${(sale.saleNo)!''}"
                                       class="easyui-validatebox" readonly="true" autocomplete="off"/></td>
                <td width="15%"><label>销售人：</label></td>
                <td width="35%">
                    <input id="saleUserId" name="saleUserId" class="easyui-combobox" style="width:156px;"/>
                </td>
            </tr>
            <tr>
                <td width="15%"><label>买家：</label></td>
                <td width="35%">
                    <input id="buyerId" name="buyerId" class="easyui-combobox" style="width:156px;"/>
                <#--<input name="supplierId" type="text" style="width:200px;" value="${(sale.supplierId)!''}"-->
                                       <#--class="easyui-validatebox"  autocomplete="off"/>-->
                </td>
                <td width="15%"><label>总额：</label></td>
                <td width="35%">
                    <input name="total" id="orderTotal" type="text" style="width:200px;" readonly="true" value="${(sale.total)!''}"
                           class="easyui-validatebox" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td width="15%"><label>备注：</label></td>
                <td colspan="3"><input name="remark" type="text" style="width:300px;" value="${(sale.remark)!''}"
                                       class="easyui-validatebox" autocomplete="off"/></td>
            </tr>
        </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">新增明细</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除明细</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存明细</a>
            </div>
        </div>
        <table id="dg" class="easyui-datagrid" style="width:100%;height:auto"
               data-options="
				singleSelect: true,
				toolbar: '#win',
				url: '/sale/getDetail?saleNo=${(sale.saleNo)!"-1"}',
				fitColumns:true,
				method: 'get',
				onClickRow: onClickRow
			">
            <thead>
            <tr style="width: 100%">
                <th data-options="field:'productId',width:250,align:'center',
						formatter:function(value,row){
							return row.name;
						},
						editor:{
							type:'combobox',
							options:{
								valueField:'id',
								textField:'name',
								method:'get',
								editable:true,
								url:'/product/getAllProduct',
								required:true,
								onSelect:getPrice
							}
						}">采购商品</th>
                <th data-options="field:'count',width:250,editor:'textbox',align:'center'">采购数量</th>
                <th data-options="field:'price',width:250,align:'center'">采购价格</th>
                <th data-options="field:'total',width:250,align:'center'">采购总价</th>
            </tr>
            </thead>
        </table>
        <input hidden type="text" name="id" value="${(sale.id)!''}">
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $("#saleUserId").combobox({
            url: '/user/getAllUser',
            editable: false,
            valueField:'id',
            textField:'nickname',
            onLoadSuccess:function (node,data) {
                $("#saleUserId").combobox('setValue','${(sale.saleUserId)!''}');
                $("#saleUserId").combobox('readonly','readonly')
            }
        });
        $("#buyerId").combobox({
            url: '/buyer/getAllData',
            editable: false,
            valueField:'id',
            textField:'name',
            onLoadSuccess:function (node,data) {
                $("#buyerId").combobox('setValue','${(sale.buyerId)!''}');
            }
        });
    });
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productId'});
            var name = $(ed.target).combobox('getText');
            $('#dg').datagrid('getRows')[editIndex]['name'] = name;

            var numed=$('#dg').datagrid('getEditor', {index:editIndex,field:'count'});
            var num=$(numed.target).val();
//            var priced=$('#dg').datagrid('getEditor', {index:editIndex,field:'price'});
//            var price=$(priced.target).val();
            var price=$('#dg').datagrid('getRows')[editIndex]['price'];
            var total=Number(num)*Number(price).toFixed(2);
            $('#dg').datagrid('getRows')[editIndex]['total']=total;
            changeTotal();

            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        changeTotal();
        editIndex = undefined;
    }
    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }
    function getChanges(){
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }
    function changeTotal() {
        var rows=$('#dg').datagrid('getRows');
        var total=0;
        for(var i=0;i<rows.length;i++){
            total=Number(rows[i]['total'])+Number(total);
        }
        $('#orderTotal').val(total);
    }
    function getPrice(row) {
        if (editIndex == undefined){return true}
        $('#dg').datagrid('getRows')[editIndex]['price']=row['price'];
    }
</script>